<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/font-icon/iconfont.css">
  <link rel="stylesheet" href="./css/bili.css">

  <style>
    .uldoc li {
      background-color: rgb(208, 60, 166);
      color: #fff;
    }
  </style>
</head>




<body>

  <!-- #第一题：根据以下标签按照图片哔站的样式完善样式 -->

  <div class="nav">
    <div class="nav-in">
      <!-- 左侧动态热门 -->
      <div class="hot-tags">
        <!-- 自己扒图 -->
        <div class="tags"><img src="./images/image.png" alt=""><span>动态</span></div>
        <div class="tags"><img src="./images/image.png" alt=""><span>热门</span></div>
      </div>
      <!-- 中间热门类别 -->
      <div class="cates">
        <ul>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
          <li><a href="">番剧</a></li>
        </ul>
      </div>
      <!-- 右侧分类专栏-专栏，社区等 -->
      <div class="community">
        <div class="item"> <span class="iconfont icon-arrow-right-bold"></span><span>专栏</span></div>
        <div class="item"> <span class="iconfont icon-arrow-right-bold"></span><span>专栏</span></div>
        <div class="item"> <span class="iconfont icon-arrow-right-bold"></span><span>专栏</span></div>
        <div class="item"> <span class="iconfont icon-arrow-right-bold"></span><span>专栏</span></div>
        <div class="item"> <span class="iconfont icon-arrow-right-bold"></span><span>专栏</span></div>
        <div class="item"> <span class="iconfont icon-arrow-right-bold"></span><span>专栏</span></div>
      </div>
    </div>
  </div>

  <script>
    // #第二题：根据以下要求写出程序

    // 题目1：使用调试打印出以下数组的偶数
    let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    for (let a = 0; a < numbers.length; a++) {
      if (!(numbers[a] % 2)) {
        console.log(numbers[a])
      }
    }

    // 题目2：查找数组中的最大值和最小值，并使用调试打印出来
    let numbers2 = [45, 78, 23, 89, 14, 67]
    let max = numbers2[0]
    let min = numbers2[0]
    for (let b = 0; b < numbers2.length; b++) {
      if (max < numbers2[b]) { max = numbers2[b] }
      if (min > numbers2[b]) { min = numbers2[b] }
    }
    console.log(max)
    console.log(min)


    // 题目3：使用for循环+字符串模板+字符拼接，把以下数组生成ui>li文档并输出到html文档中,ul的class类名为 docs

    let docs = [
      "青花瓷眼镜妞皮肤回归了～",
      "在所有键盘上使用雷蛇新功能？【免费开源小程序】",
      "头发丝，棉毛棒，木头青蛙呱呱呱，这个我是真喜欢7，ASMR",
      "今天买3斤羊肉，碳烤大块羊肉串，一口一块大肉，真香"
    ]
    let str = ''
    let str1 = ''
    document.write(`<ul class="docs">`)
    for (let c = 0; c < docs.length; c++) {
      str += `${docs[c]}\t`
    }
    for (let d = 0; d < str.length; d++) {
      if (str[d] != `\t`) {
        str1 += str[d]
      } else {
        document.write(`<li>${str1}</li>`)
        str1 = ''
      }
    }
    document.write(`</ul>`)

  </script>


</body>

</html>